import React from 'react';
import { injectIntl } from 'react-intl';
import { getEnvStatus } from '../status-dot';
import StatusTag from '../status-tag';

import './index.less';

function EnvDetail({ record, intl: { formatMessage }, isRecord }) {
  let data = record;
  if (isRecord) {
    data = record ? record.toData() : null;
  }
  const {
    name,
    connect,
    synchronize,
    synchro,
    active,
    code,
    description,
    clusterName,
    clusterBelongedProjectName,
  } = data || {};
  const status = data ? getEnvStatus({ connect, synchronize: synchronize || synchro, active }) : '';
  const renderContent = (value) => <span className="c7ncd-env-detail-item-value">{value}</span>;
  const list = [
    { key: 'name', value: renderContent(name) },
    {
      key: 'status',
      value: status
    && <StatusTag name={formatMessage({ id: status })} colorCode={status} />,
    },
    { key: 'code', value: code && renderContent(code) },
    { key: 'description', value: renderContent(description) },
    { key: 'cluster', value: renderContent(clusterName) },
  ];
  return (
    <ul className="c7ncd-env-detail">
      {list.map((item) => (
        <li className="c7ncd-env-detail-item">
          <span className="c7ncd-env-detail-item-text">
            {formatMessage({ id: `c7ncd.env.${item.key}` })}
          </span>
          {item.value}
        </li>
      ))}
      <li className="c7ncd-env-detail-item">
        <span className="c7ncd-env-detail-item-text">
          集群所在项目：
        </span>
        <span className="c7ncd-env-detail-item-value">{clusterBelongedProjectName}</span>
      </li>
    </ul>
  );
}

EnvDetail.defaultProps = {
  isRecord: true,
};

export default injectIntl(EnvDetail);
